<template>
    <ul>
        <li :class="{active:item.isCompleted}" v-for="(item,index) in data" :key="item.id">
            <input type="checkbox" :checked="item.isCompleted" @change="checkchange(item,$event)">
           {{item.todo}}
            <b @click="handleDel(index)">X</b>
        </li>
    </ul>
    <div class="options">
        <button @click="filter('all')">全部</button>
        <span style="color:red; margin-right:5px; font-size=18px;">{{allCount}}</span>
        <span>条事项</span> 
        <button @click="filter('completed')">
            已完成:
            <span style="color:red; margin-right:5px; font-size=18px;">{{completedCount}}</span>
        </button>
        <button @click="filter('active')">
            未完成:
            <span style="color:red; margin-right:5px; font-size=18px;">{{activeCount}}</span>
        </button>    
        </div>
</template>
<script setup>
import {  defineProps, toRefs,defineEmits } from 'vue';
// 1.列表展示
// 定义props接收data
let props = defineProps(['data','allCount','completedCount','activeCount'])
let {data,allCount,completedCount,activeCount} = toRefs(props)

// 点击删除按钮的逻辑
let emit = defineEmits(['del','getFlag'])
let handleDel =(index)=>{
    emit('del',index)
}
// 勾选
let checkchange =(item,e)=>{
    //拿到input:checkbox的勾选状态
    // console.log(e.target);
    console.log(e.target.checked);
    item.isCompleted = e.target.checked
    // console.log(item);
    // console.log(data);
} 
// 声明一个筛选todo的方法
let filter = flag =>{
    emit('getFlag',flag)
}
</script>
<!-- 样式 -->
<style scope>
ul{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
.active{
    background-color: pink;
}
.options button{
    background: transparent;
    border: 1px double #00bfff;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    font-weight: bolder;
    margin: 10px;
    outline: 0;
}
b{
    float: right;
    cursor:pointer
}
</style>
